<script setup>

import { inject, onMounted, ref, customRef } from "@vue/runtime-core";
const isShow = ref(true);

let prod = import.meta.env.PROD;
let dev = import.meta.env.DEV;


function fun() {
    alert('hello');
}

function myref(value) {

    return customRef((track, trigger) => {
        let timer;
        return {
            get() {
                track();
                return value;
            },
            set(newValue) {
                clearTimeout(timer);
                timer = setTimeout(() => {
                    trigger();
                    value = newValue;
                }, 500);

            }
        }
    });
}


let a = myref("hello");



customRef((track, trigger) => {
    return {
        get() {

        },
        set(value) {

        }
    }
})



</script>

<template>
    <h1 class="title">页面A</h1>
    

    <el-form ref="editForm">
        <el-form-item label="编号">
            <el-input autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="编号">
            <div>
                <QuillEditor theme="snow" toolbar="full" />
            </div>
        </el-form-item>

        <el-form-item label="编号">
            <el-input autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="编号" prop="no">
            <el-input autocomplete="off"></el-input>
        </el-form-item>
    </el-form>

    <p v-if="prod">生产环境</p>

    <p v-if="dev">开发环境</p>

    <!-- <button @click="isShow = !isShow">显示/隐藏</button> -->
</template>


<style lang="scss" scoped>
h1 {
    background-color: orange;
    transform: 0.5s;
}

.hello-enter {
    transform: translateX(-100%);
}
.hello-enter-to {
    transform: translateX(0);
}
.page-enter-active {
}
.page-leave-active {
}
</style>